<template lang="html">
  <section class="chose">
    <div class="chose-view">
        <h1 class="chose-view-title">
            {{detail.goods_name}}
        </h1>
        <p class="price-content-view">
            <span class="price-view"><span class="symbol">￥</span><span class="price">{{detail.shop_price}}</span></span>
        </p>
    </div>
    <div class="base-info-view">
        <div class="left">
            <p class="unit">
                <span class="title"><span style="letter-spacing: 5vw;">库</span>存：</span>
                <span class="content">{{detail.limit_num}}</span>
            </p>
            <p class="unit">
                <span class="title"><span style="letter-spacing: 5vw;">运</span>费：</span>
                <span class="content">¥{{detail.yun_fee}}</span>
            </p>
        </div>
        <div class="right">
            <p>
                <span>购买数量：</span>
                <span class="purchase-count-view">
                    <i class="reduce" @click="reduce">-</i>
                    <input type="text" class="purchase-count" :value="count" @input="inputCount" onfocus="this.select()">
                    <i class="plus" @click="plus">+</i>
                </span>
            </p>
        </div>
    </div>
    <div class="detail-show">
      {{detail.goods_desc}}
    </div>
    <!-- 添加空函数 解决Safari浏览器 :active无效 -->
    <!-- <div class="chose-mychosed" ontouchstart="">
        <div class="colChose">
            <span
            v-for="(k,i) in view.chose"
            :class="{active:colSelected==i}"
            @click="colChose(i)"
            >{{k.col}}</span>
        </div>
        <div class="sizeChose" >
            <span
            v-for="(k,i) in view.chose"
            :class="{active:sizeSelected==i}"
            @click="sizeChose(i)"
            >
            {{k.size}}
            </span>
        </div>
    </div> -->
  </section>
</template>

<script>
import {
  MessageBox
} from 'mint-ui';
import {
  mapState
} from 'vuex'


export default {
    props: ['detail'],
    data(){
        return {
            count: 1,
        }
    },
    methods: {

        // 点击后把i赋值给colSelected,再通过判断决定是否添加选中样式   (active)
        colChose(i) {
            this.$store.commit('CHANGE_COL_SELECTED', i);
        },
        sizeChose(i) {
            this.$store.commit('CHANGE_SIZE_SELECTED', i);
        },
        plus(){
            this.count = (parseInt(this.count) || 0) + 1
        },
        reduce(){
            let count = (parseInt(this.count) || 1) - 1
            if(count > 0){
                this.count = count
            }
        },
        inputCount(value){

        },

    }
}
</script>

<style lang="less" scoped>
@import '../../assets/fz.less';
.chose {
    // padding: 3vw;

      div, ul, li, span, input{
        box-sizing: border-box;
      }

    .chose-view {
        height: 12.29vh;
        padding: 1.57vh 3.2vw;
        margin-bottom: 1.5vh;
        background: #fff;

        > h1 {

            &.chose-view-title{
                height: 5.1vh;
                margin-bottom: 2.25vh;
                font-size: 4vw;
                color: #333;
            }

            .fz(font-size,36);
            color: #2c3e50;
            > span {
                color: rgb(238, 113, 80);
            }
        }
        > span {
            line-height: 10vw;
            color: @cl;
            .fz(font-size,34);
            font-weight: 600;
        }

        .price-content-view{

            display: -ms-flex;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            justify-content: space-between;

            .price-view{
                .symbol{
                    width: 1.73vw;
                    height: 2.13vw;
                    font-size: 2.93vw;
                    color: #CB1B1D;
                }
                .price{
                    font-size: 4.53vw;
                    color: #CB1B1D;
                }
            }

            .exchange-view{
                font-size: 3.2vw;
                color: #666;

                .can_exchange{
                    color: #CB1B1D;
                }
            }
        }

    }

    .base-info-view{
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 3.2vw;
        font-size: 3.73vw;
        color: #888888;
        height: 11.84vh;
        justify-content: space-between;
        background: #fff;

        .left{
            width: 50.67vw;
            margin-top: 3.15vh;
            margin-bottom: 3vh;
            border-right: 0.01vw solid #808080;

            .unit{

                .title{
                    // letter-spacing: 5vw;
                }

                .content{
                    margin-left: 7.87vw;
                    color: #CB1B1D;
                }

            }


            .stock{

                .title{
                    // letter-spacing: 5vw;
                }

                .content{
                    margin-left: 6vw;
                    color: #1998E1;
                }

            }

        }

        .right{
            margin-top: 4.8vh;
            // margin-left: 11.2vw;

            .purchase-count-view{
                text-align: center;
                font-size: 3.2vw;
                height: 4vw;
                border: 0.13vw solid #E3E3E3;

                display: -ms-inline-flex;
                display: inline-flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;

                .plus{
                    width: 4vw;
                }

                .reduce{
                    width: 4vw;
                }

                .purchase-count{
                    width: 8vw;
                    height: 4vw;
                    padding: 0.5vw 2vw;
                    border: 0.13vw solid #E3E3E3;
                    font-size: 2.3vw;
                    text-align: center;
                }
            }
        }
    }

    .chose-mychosed {

        background-color: #fff;
        > div {
            padding-top: 20px;
            display: -ms-flex;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

            span {
                .fz(font-size,26);
                padding: 6px 10px;
                border: 1px solid rgb(111, 111,111);
                margin-right: 6vw;
                color: rgb(111, 111, 111);
                &.active,
                &:active {
                    color: @cl;
                    border-color: @cl;
                    -webkit-transform: scale(1.1);
                    transform: scale(1.1);
                }

            }
        }
    }

    .footer {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        height: 14vw;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        -moz-user-select: none;
        -webkit-user-select: none;
        .bt();
        .footer-addcar,
        .footer-gocar,
        .footer-index {
            text-align: center;
        }

        .footer-index {
            -webkit-flex: 3;
            -ms-flex: 3;
            flex: 3;
            line-height: 14vw;
            height: 14vw;
            padding-top: 1.5vw;
            border-right-color: #f7f7f7;
            border-right-style: solid;
            .fz(border-right-width,1);

            i {
                .fz(font-size,45);
            }
            &:active {
                background-color: #f1f1f1;
            }
        }

        .footer-gocar {
            position: relative;
            -webkit-flex: 3;
            -ms-flex: 3;
            flex: 3;
            height: 14vw;
            line-height: 14vw;
            padding-top: 1.6vw;
            span {
                height: 5.5vw;
                width: 5.5vw;
                line-height: 5.5vw;
                position: absolute;
                top: 0.5vw;
                right: 5.5vw;
                background-color: @cl;
                border-radius: 50%;
                color: #fff;
                .fz(font-size,24);
            }
            &:active {
                background-color: #f1f1f1;
            }
            i {
                .fz(font-size,48);
            }
        }

        .footer-addcar {
            -webkit-flex: 6;
            -ms-flex: 6;
            flex: 6;
            line-height: 14vw;
            height: 14vw;

            color: #fff;
            background-color: @cl;
            letter-spacing: 0.2vw;
            &:active {
                background-color: #ff7d00;
            }
        }
    }
}
</style>
